.designer-wrap {
	width: 100%;
	height: 100vh;
	overflow: hidden;

	.designer-nav-box {
		width: 100%;
		height: 50px;
		-webkit-box-shadow: 0 2px 8px rgba(92, 99, 115, 25%);
		box-shadow: 0 2px 8px rgba(92, 99, 115, 25%);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		z-index: 100;

		.designer-nav-return {
			// width: 170px;
			-webkit-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin-left: 20px;
			font-size: 14px;
			font-weight: 700;
			color: #575757;
			cursor: pointer;

			img {
				margin-right: 10px;
			}

			.select-version-box {
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				cursor: pointer;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				font-size: 16px;
				color: #575757;
				font-weight: 700;
				margin-right: 30px;
				position: relative;

				.title {
					max-width: 60%;
					overflow: hidden;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.version {
					color: #575757;
				}
			}
		}

		.designer-nav-center {
			-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
			text-align: center;
			line-height: 50px;

			.designer-nav-center-wrap {
				display: inline-block;

				.designer-nav-center-wrap-item {
					display: inline-block;
					margin-right: 35px;
					font-size: 16px;
					font-weight: 700;
					color: #575757;
					cursor: pointer;

					.act-item {
						border-bottom: 3px solid #ff6a00;
						padding-bottom: 12px;
						color: #575757;
					}
				}
			}
		}

		.designer-nav-button {
			// width: 220px;
			-webkit-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			margin-right: 25px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: end;
			-ms-flex-pack: end;
			justify-content: flex-end;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
	}

	.designer-base-info {
		margin: 0 auto;
		padding: 24px 0;
		height: 100%;
		text-align: center;
		overflow-y: auto;
		background-color: #f2f3f5;

		.base-info-panel {
			display: inline-block;
			width: 1128px;
			padding: 24px 288px;
			background-color: #fff;
			text-align: left;
		}
	}

	.designer-content-box {
		width: 100%;
		height: calc(100vh - 50px);
		overflow: hidden;

		.flow-design-wrap {
			width: 100%;
			height: 100%;
			background-color: #f2f3f5;
			position: relative;

			&::before {
				display: table;
				content: '';
			}

			.flow-design-container {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				width: 100%;
				height: 100%;
				overflow: scroll;

				.flow-design-content {
					margin: 30px auto;

					.flow-row-container,
					.flow-row {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						-ms-flex-direction: column;
						flex-direction: column;
						-webkit-box-flex: 1;
						-ms-flex-positive: 1;
						flex-grow: 1;
					}

					.flow-row {
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						position: relative;

						.flow-box {
							-webkit-box-flex: 1;
							-ms-flex-positive: 1;
							flex-grow: 1;
							padding: 0 50px;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								margin: auto;
								width: 1px;
								height: 100%;
								background-color: #cccfdb;
							}

							.node-start-btn {
								padding-bottom: 20px;
							}

							.after-node-btn {
								padding: 20px 0 35px;
								position: relative;
								text-align: center;

								img {
									cursor: pointer;
								}
							}
						}

						.flow-item {
							padding-top: 0;

							.node-start,
							.node-temmi {
								position: relative;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								z-index: 2;
								-webkit-box-pack: center;
								-ms-flex-pack: center;
								justify-content: center;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								width: 80px;
								height: 80px;
								border-radius: 60px;
								color: #f8f8fa;
								background-image: -webkit-gradient(linear, left top, right top, from(#ff6a00), to(#f78b3e)),
									-webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
								background-image: -webkit-linear-gradient(left, #ff6a00, #f78b3e), -webkit-linear-gradient(#ff6a00, #ff6a00);
								background-image: -o-linear-gradient(left, #ff6a00 0, #f78b3e 100%), -o-linear-gradient(#ff6a00, #ff6a00);
								background-image: linear-gradient(90deg, #ff6a00, #f78b3e), linear-gradient(#ff6a00, #ff6a00);
								background-blend-mode: normal, normal;
								-webkit-box-shadow: 0 2px 10px 0 rgba(255, 107, 2, 50%);
								box-shadow: 0 2px 10px 0 rgba(255, 107, 2, 50%);
								font-size: 18px;
							}

							.node-temmi {
								cursor: pointer;
								background-image: -webkit-gradient(linear, left top, right top, from(#ff4056), to(#ff4056)),
									-webkit-gradient(linear, left top, left bottom, from(#ff6173), to(#ff6173));
								background-image: -webkit-linear-gradient(left, #ff4056, #ff4056), -webkit-linear-gradient(#ff6173, #ff6173);
								background-image: -o-linear-gradient(left, #ff4056 0, #ff4056 100%), -o-linear-gradient(#ff6173, #ff6173);
								background-image: linear-gradient(90deg, #ff4056, #ff4056), linear-gradient(#ff6173, #ff6173);

								&:hover .close-icon {
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
								}

								.close-icon {
									position: absolute;
									display: none;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;
									top: -2px;
									left: -5px;
									width: 20px;
									height: 20px;
									background: #9e9e9e;
									color: #fff;
									font-size: 14px;
									border-radius: 16px;

									.close-icon:hover {
										background: red;
									}
								}
							}

							.flow-node-box {
								cursor: pointer;
								// width: 220px;
								// height: 118px;
								width: 210px;
								height: 100px;
								background-color: #fff;
								-webkit-box-shadow: 0 2px 6px 0 rgba(75, 82, 94, 0.2);
								box-shadow: 0 2px 6px 0 rgba(75, 82, 94, 0.2);
								border-radius: 4px;
								position: relative;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;

								.node-sp,
								.node-start-bg {
									background-image: -webkit-gradient(linear, left top, right top, from(#ff6a00), to(#f78b3e)),
										-webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
									background-image: -webkit-linear-gradient(left, #ff6a00, #f78b3e), -webkit-linear-gradient(#ff6a00, #ff6a00);
									background-image: -o-linear-gradient(left, #ff6a00 0, #f78b3e 100%), -o-linear-gradient(#ff6a00, #ff6a00);
									background-image: linear-gradient(90deg, #ff6a00, #f78b3e), linear-gradient(#ff6a00, #ff6a00);
								}

								.node-launch {
									background-image: -webkit-gradient(linear, left top, right top, from(#a9b4cd), to(#a9b4cd)),
										-webkit-gradient(linear, left top, left bottom, from(#a9b4cd), to(#a9b4cd));
									background-image: -webkit-linear-gradient(left, #a9b4cd, #a9b4cd), -webkit-linear-gradient(#a9b4cd, #a9b4cd);
									background-image: -o-linear-gradient(left, #a9b4cd 0, #a9b4cd 100%), -o-linear-gradient(#a9b4cd, #a9b4cd);
									background-image: linear-gradient(90deg, #a9b4cd, #a9b4cd), linear-gradient(#a9b4cd, #a9b4cd);
								}

								/* .node-cc {
                  background-image: -webkit-gradient(linear, left top, right top, from(#498ff2), to(#6da4f2)),
                    -webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
                  background-image: -webkit-linear-gradient(left, #498ff2, #6da4f2), -webkit-linear-gradient(#ff6a00, #ff6a00);
                  background-image: -o-linear-gradient(left, #498ff2 0, #6da4f2 100%), -o-linear-gradient(#ff6a00, #ff6a00);
                  background-image: linear-gradient(90deg, #498ff2, #6da4f2), linear-gradient(#ff6a00, #ff6a00);
                } */
								.node-cc {
									background-image: -webkit-gradient(linear, left top, right top, from(#268bfb -16.37%), to(#33e1ae 137.34%)),
										-webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
									background-image: -webkit-linear-gradient(left, #268bfb -16.37%, #33e1ae 137.34%), -webkit-linear-gradient(#ff6a00, #ff6a00);
									background-image: -o-linear-gradient(left, #268bfb -16.37% 0, #33e1ae 137.34%), -o-linear-gradient(#ff6a00, #ff6a00);
									background-image: linear-gradient(90deg, #268bfb -16.37%, #33e1ae 137.34%), linear-gradient(#ff6a00, #ff6a00);
								}

								.node-tz {
									background-image: -webkit-gradient(linear, left top, right top, from(#498ff2), to(#6da4f2)),
										-webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
									background-image: -webkit-linear-gradient(left, #498ff2, #6da4f2), -webkit-linear-gradient(#ff6a00, #ff6a00);
									background-image: -o-linear-gradient(left, #498ff2 0, #6da4f2 100%), -o-linear-gradient(#ff6a00, #ff6a00);
									background-image: linear-gradient(90deg, #498ff2, #6da4f2), linear-gradient(#ff6a00, #ff6a00);
								}
								.node-sj {
									background-image: -webkit-gradient(linear, left top, right top, from(#ff4056), to(#ff4056)),
										-webkit-gradient(linear, left top, left bottom, from(#ff6173), to(#ff6173));
									background-image: -webkit-linear-gradient(left, #ff4056, #ff4056), -webkit-linear-gradient(#ff6173, #ff6173);
									background-image: -o-linear-gradient(left, #ff4056 0, #ff4056 100%), -o-linear-gradient(#ff6173, #ff6173);
									background-image: linear-gradient(90deg, #ff4056, #ff4056), linear-gradient(#ff6173, #ff6173);
								}
								.node-fill {
									background-image: -webkit-gradient(linear, left top, right top, from(#29cc80), to(#5ccc98)),
										-webkit-gradient(linear, left top, left bottom, from(#29cc80), to(#29cc80));
									background-image: -webkit-linear-gradient(left, #29cc80, #5ccc98), -webkit-linear-gradient(#29cc80, #29cc80);
									background-image: -o-linear-gradient(left, #29cc80 0, #5ccc98 100%), -o-linear-gradient(#29cc80, #29cc80);
									background-image: linear-gradient(90deg, #29cc80, #5ccc98), linear-gradient(#29cc80, #29cc80);
								}

								.node-transact {
									background-image: -webkit-gradient(linear, left top, right top, from(#935af6), to(#f65ac2)),
										-webkit-gradient(linear, left top, left bottom, from(#935af6), to(#935af6));
									background-image: -webkit-linear-gradient(left, #935af6, #f65ac2), -webkit-linear-gradient(#935af6, #935af6);
									background-image: -o-linear-gradient(left, #935af6 0, #f65ac2 100%), -o-linear-gradient(#935af6, #935af6);
									background-image: linear-gradient(90deg, #935af6, #f65ac2), linear-gradient(#935af6, #935af6);
								}

								.node-delete {
									background-image: -webkit-gradient(linear, left top, right top, from(#aaaab3), to(#aaaab3)),
										-webkit-gradient(linear, left top, left bottom, from(#c4c4cc), to(#c4c4cc));
									background-image: -webkit-linear-gradient(left, #aaaab3, #aaaab3), -webkit-linear-gradient(#c4c4cc, #c4c4cc);
									background-image: -o-linear-gradient(left, #aaaab3 0, #aaaab3 100%), -o-linear-gradient(#c4c4cc, #c4c4cc);
									background-image: linear-gradient(90deg, #aaaab3, #aaaab3), linear-gradient(#c4c4cc, #c4c4cc);
								}

								.node-zl {
									background-image: -webkit-gradient(linear, left top, right top, from(#ff9313), to(#faab4b)),
										-webkit-gradient(linear, left top, left bottom, from(#ff6a00), to(#ff6a00));
									background-image: -webkit-linear-gradient(left, #ff9313, #faab4b), -webkit-linear-gradient(#ff6a00, #ff6a00);
									background-image: -o-linear-gradient(left, #ff9313 0, #faab4b 100%), -o-linear-gradient(#ff6a00, #ff6a00);
									background-image: linear-gradient(90deg, #ff9313, #faab4b), linear-gradient(#ff6a00, #ff6a00);
								}
								//  进行中
								.node-status-current {
									background-image: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff)),
										-webkit-gradient(linear, left top, left bottom, from(#1890ff), to(#1890ff));
									background-image: -webkit-linear-gradient(left, #1890ff, #1890ff), -webkit-linear-gradient(#909399, #909399);
									background-image: -o-linear-gradient(left, #1890ff 0, #1890ff 100%), -o-linear-gradient(#909399, #909399);
									background-image: linear-gradient(90deg, #1890ff, #1890ff), linear-gradient(#1890ff, #1890ff);
								}
								//  未进行
								.node-status-not {
									background-image: -webkit-gradient(linear, left top, right top, from(#909399), to(#909399)),
										-webkit-gradient(linear, left top, left bottom, from(#909399), to(#909399));
									background-image: -webkit-linear-gradient(left, #909399, #909399), -webkit-linear-gradient(#909399, #909399);
									background-image: -o-linear-gradient(left, #909399 0, #909399 100%), -o-linear-gradient(#909399, #909399);
									background-image: linear-gradient(90deg, #909399, #909399), linear-gradient(#909399, #909399);
								}
								//  已完成
								.node-status-complete {
									background-image: -webkit-gradient(linear, left top, right top, from(#20b2aa), to(#20b2aa)),
										-webkit-gradient(linear, left top, left bottom, from(#20b2aa), to(#20b2aa));
									background-image: -webkit-linear-gradient(left, #20b2aa, #20b2aa), -webkit-linear-gradient(#20b2aa, #20b2aa);
									background-image: -o-linear-gradient(left, #20b2aa 0, #20b2aa 100%), -o-linear-gradient(#20b2aa, #20b2aa);
									background-image: linear-gradient(90deg, #20b2aa, #20b2aa), linear-gradient(#20b2aa, #20b2aa);
								}

								.node-name {
									padding: 15px;
									font-size: 14px;
									-webkit-box-sizing: border-box;
									box-sizing: border-box;
									border-radius: 4px 4px 0 0;
									height: 44px;
									-webkit-box-pack: justify;
									-ms-flex-pack: justify;
									justify-content: space-between;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;
									color: #fff;
									background-color: #ff6a00;

									.node-name-title {
										font-weight: bold;
									}

									.node-name-level {
										width: 50%;
										text-align: right;
									}
								}

								.node-main {
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;
									height: calc(100% - 44px);
									border-top: none;
									-webkit-box-sizing: border-box;
									box-sizing: border-box;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									padding-left: 16px;
									padding-right: 16px;
									white-space: nowrap;
									overflow: hidden;
									-o-text-overflow: ellipsis;
									text-overflow: ellipsis;
									color: #575757;
									font-size: 14px;

									span {
										overflow: hidden;
										text-overflow: ellipsis;
									}

									.hint-title {
										color: #ff6a00;
										font-size: 12px;
									}
								}

								&.has-error {
									border: 1px solid #ff5b4c;
									box-shadow: 0 0 3px 0 #ff5b4c;
								}

								.node-error {
									position: absolute;
									right: -40px;
									top: 32px;
									font-size: 32px;
									color: #ff5b4c;
								}

								&:hover .close-icon {
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
								}

								.close-icon {
									position: absolute;
									display: none;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;
									top: -5px;
									left: -5px;
									width: 20px;
									height: 20px;
									background: #9e9e9e;
									color: #fff;
									font-size: 14px;
									border-radius: 16px;

									&:hover {
										background: red;
									}
								}
							}

							.flow-branch-suggest {
								cursor: pointer;
								width: 210px;
								height: 60px;
								background-color: #fff;
								-webkit-box-shadow: 0 2px 6px 0 rgba(75, 82, 94, 20%);
								box-shadow: 0 2px 6px 0 rgba(75, 82, 94, 20%);
								border-radius: 4px;
								position: relative;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;

								&:hover .close-icon {
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
								}

								.node-name {
									padding: 15px;
									margin-right: -1px;
									font-size: 14px;
									font-weight: 700;
									color: #575757;
									background-color: #fff;
									border: none !important;
									height: 60px;
									-webkit-box-sizing: border-box;
									box-sizing: border-box;
									border-radius: 4px 4px 0 0;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									-webkit-box-align: center;
									-ms-flex-align: center;
									justify-content: center;
									display: flex;
									align-items: center;

									span {
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
									}
								}

								.close-icon {
									position: absolute;
									display: none;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;
									top: -5px;
									left: -5px;
									width: 20px;
									height: 20px;
									background: #9e9e9e;
									color: #fff;
									font-size: 14px;
									border-radius: 16px;

									&:hover {
										background: red;
									}
								}
							}

							.flow-node-box,
							.flow-branch-suggest {
								/* 删除遮罩 */
								.node-delete-layer {
									position: absolute;
									width: 100%;
									height: 100%;
									left: 0;
									top: 0;
									display: flex;
									justify-content: center;
									align-items: center;
									background: rgba(0, 0, 0, 0.7);
									border-radius: 4px;

									button {
										margin-right: 10px;
									}

									.node-delete-cancel {
										color: #fff;
										border-color: #fff;
									}

									.ant-btn-ghost {
										background-color: initial;
									}
								}
							}
						}

						// 选中
						.flow-item-active {
							-webkit-box-shadow: 0 3px 30px 0 rgba(255, 106, 0, 75%);
							box-shadow: 0 3px 30px 0 rgba(255, 106, 0, 75%);
						}

						// 分支节点
						.flow-branch {
							position: relative;
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-orient: horizontal;
							-webkit-box-direction: normal;
							-ms-flex-direction: row;
							flex-direction: row;
							border-top: 1px solid #cccfdb;
							border-bottom: 1px solid #cccfdb;

							.clear-left-border,
							.clear-right-border {
								position: absolute;
								top: 0;
								bottom: 0;
								width: 100%;
							}

							.branch-node {
								position: absolute;
								top: 0;
								left: 50%;
								z-index: 2;
								-webkit-transform: translate(-50%, -50%);
								-ms-transform: translate(-50%, -50%);
								transform: translate(-50%, -50%);
								cursor: pointer;
							}

							.meet-node {
								position: absolute;
								bottom: 0;
								left: 50%;
								z-index: 2;
								-webkit-transform: translate(-50%, 50%);
								-ms-transform: translate(-50%, 50%);
								transform: translate(-50%, 50%);
							}

							.flow-col {
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								-ms-flex-direction: column;
								flex-direction: column;
								position: relative;

								.clear-left-border {
									left: 0;

									&::before {
										content: '';
										position: absolute;
										left: 0;
										top: -5px;
										width: 50%;
										background: #f2f3f5;
										height: 10px;
									}

									&::after {
										content: '';
										position: absolute;
										left: 0;
										bottom: -5px;
										width: 50%;
										background: #f2f3f5;
										height: 10px;
									}
								}

								.clear-right-border {
									right: 0;

									&::before {
										content: '';
										position: absolute;
										right: -0.5px;
										top: -5px;
										width: 50%;
										background: #f2f3f5;
										height: 10px;
									}

									&::after {
										content: '';
										position: absolute;
										right: -0.5px;
										bottom: -5px;
										width: 50%;
										background: #f2f3f5;
										height: 10px;
									}
								}

								.flow-row {
									-webkit-box-flex: 1;
									-ms-flex-positive: 1;
									flex-grow: 1;
								}

								.flow-node-branch {
									padding-bottom: 10px;

									.node-name {
										color: #575757;
										background-color: #fff;
										border-bottom: 1px solid #dee0e3;
									}
								}

								.flow-item {
									margin-top: 20px;
								}
							}
						}

						.after-branch-btn {
							padding: 20px 0 41px;
							position: relative;
							text-align: center;

							&::before {
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								margin: auto;
								width: 1px;
								height: 100%;
								background-color: #ccc;
							}

							img {
								cursor: pointer;
								z-index: 2;
								position: relative;
							}
						}
					}

					.flow-end-box {
						padding-bottom: 120px;

						.flow-end {
							position: relative;
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							z-index: 2;
							-webkit-box-pack: center;
							-ms-flex-pack: center;
							justify-content: center;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							width: 80px;
							height: 80px;
							border-radius: 60px;
							color: #f8f8fa;
							background-image: -webkit-linear-gradient(120deg, #bbbbc4, #d5d5de), -webkit-linear-gradient(#bcbcc5, #bcbcc5);
							background-image: -o-linear-gradient(120deg, #bbbbc4 0, #d5d5de 100%), -o-linear-gradient(#bcbcc5, #bcbcc5);
							background-image: linear-gradient(-30deg, #bbbbc4, #d5d5de), linear-gradient(#bcbcc5, #bcbcc5);
							background-blend-mode: normal, normal;
							-webkit-box-shadow: 0 2px 10px 0 rgba(145, 145, 153, 50%);
							box-shadow: 0 2px 10px 0 rgba(145, 145, 153, 50%);
							font-size: 18px;
						}
					}
				}
			}

			.flow-design-operate {
				position: fixed;
				top: 70px;
				right: 20px;
				// width: 160px;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: reverse;
				-ms-flex-direction: row-reverse;
				flex-direction: row-reverse;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				z-index: 20;

				.flow-fullscreen {
					cursor: pointer;
					margin-left: 10px;

					.flow-fullscreen-icon {
						display: inline-block;
						width: 30px;
						height: 30px;
						opacity: 1;
						background: #fff;
						border: 1px solid #d9d9d9;
						border-radius: 2px;
						background-repeat: no-repeat;
						background-position: 50%;
						background-image: url(https://welink.huaweicloud.com/workflow-design/hae/img/fullscreen.52ee2f27.svg);
					}
				}

				.flow-design-zoom {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					//  justify-content: space-between;
					height: 30px;
					z-index: 999;

					span {
						font-size: 14px;
						width: 60px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						background: #fff;
						border-color: #d9d9d9;
						border-width: 1px 0;
						border-style: solid;
					}

					.flow-design-zoom-less,
					.flow-design-zoom-more {
						width: 30px;
						height: 30px;
						border: 1px solid #d9d9d9;
						cursor: pointer;
						background-color: #fff;
						background-size: 30px 30px;
						background-repeat: no-repeat;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							top: 14px;
							left: 9px;
							width: 11px;
							height: 1px;
							background: #008dff;
						}
					}

					.flow-design-zoom-more {
						&::after {
							content: '';
							position: absolute;
							top: 9px;
							left: 14px;
							width: 1px;
							height: 11px;
							background: #008dff;
						}
					}
				}
			}

			.flow-design-map {
				width: 202px;
				height: 150px;
				opacity: 1;
				background: #aaa;
				border: 1px solid #333;
				position: fixed;
				right: 20px;
				bottom: 22px;
				text-align: center;
				cursor: -webkit-grab;
				cursor: grab;
				z-index: 10;
				overflow: hidden;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;

				img {
					max-width: 100%;
					max-height: 100%;
				}

				.map-mask {
					width: 200px;
					height: 120px;
					opacity: 1;
					border: 1px solid #f5340d;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

		.flowSetting-box {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;

			.flowSetting-nav-box {
				height: calc(100vh - 50px);
				overflow: auto;
				-webkit-box-flex: 0;
				-ms-flex: 0 0 240px;
				flex: 0 0 240px;
				background-color: #f2f3f5;
				padding-top: 20px;
				overflow-y: auto;

				.flowSetting-nav-group {
					margin-bottom: 25px;

					.flowSetting-nav-group-item {
						width: 100%;
						padding: 12px 20px;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						cursor: pointer;

						img {
							margin-right: 10px;
							vertical-align: sub;
						}

						span {
							color: #575757;
							font-size: 14px;
						}
					}

					.act-item {
						font-weight: 700;
						width: 220px;
						background-color: rgba(255, 106, 0, 0.1);
						border-radius: 0 20px 20px 0;
					}
				}
			}

			.flowSetting-content-box {
				height: calc(100vh - 50px);
				overflow: auto;
				width: 100%;
				padding: 20px 20px;
				background: #fff;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;

				.flowSetting-card-header {
					margin-bottom: 12px;
					display: flex;
					justify-content: space-between;

					.flowSetting-card-header-title {
						height: 22px;
						width: 138px;
						font-family: PingFangSC-Medium;
						font-size: 14px;
						color: #171a1d;
						letter-spacing: 0;
						line-height: 22px;

						img {
							margin-right: 10px;
							vertical-align: sub;
						}

						span {
							color: #575757;
							font-size: 14px;
						}
					}
				}

				.flowSetting-card-des {
					height: 44px;
					font-family: PingFangSC-Regular;
					font-size: 14px;
					color: rgba(23, 26, 29, 0.4);
					letter-spacing: 0;
					line-height: 22px;
				}
			}
		}
	}
}

.flow-ant-drawer-title {
	color: #fff;
	// font-weight: 700;
	margin-left: 10px;
}

.flow-setting-module {
	// height: calc(100% - 114px);
	.flow-setting-content {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 14px;
		color: #575757;

		.flow-setting-item {
			margin-bottom: 20px;
			font-size: 14px;
			color: #575757;

			.flow-setting-item-title {
				margin-bottom: 10px;
				font-weight: 700;

				.light-text {
					color: #8f959e;
					font-weight: 400;
				}
			}

			// 操作
			.flow-setting-option {
				.flow-setting-option-item {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					padding: 14px 0;
					border-bottom: 1px solid #dee0e3;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;

					.flow-setting-option-item-left {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;

						.flow-setting-option-desc {
							margin-left: 9px;

							p {
								margin: 0;
								padding: 0;
								font-family: Microsoft YaHei;
							}

							.setting-option-title {
								color: #575757;
								font-size: 14px;
							}

							.setting-option-desc {
								color: #979797;
								font-size: 12px;
							}
						}
					}
				}
			}

			// 条件
			.flow-setting-condition-box {
				max-height: 90%;
				// overflow: scroll;
				.flow-setting-condition-group {
					background-color: #f2f3f5;
					padding-bottom: 10px;
					margin-top: 15px;

					.flow-setting-condition-item {
						border-radius: 3px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: start;
						-ms-flex-pack: start;
						justify-content: flex-start;
						padding: 10px 10px 5px;

						.flow-setting-condition-option {
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-ms-flex-pack: distribute;
							justify-content: space-around;
							width: 100%;
						}

						.flow-setting-condition-value {
							background: #fff;
							width: 45%;
							color: #c0c4cc;
							font-size: 13px;
							height: 40px;
							line-height: 40px;
							-webkit-box-sizing: border-box;
							box-sizing: border-box;
							border-radius: 5px;
							border: 1px solid #dcdfe6;
						}

						.flow-setting-condition-del {
							width: 38px;
							height: 38px;
							background-color: #fff;
							border-radius: 3px;
							border: 1px solid #dee0e3;
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							-webkit-box-pack: center;
							-ms-flex-pack: center;
							justify-content: center;
							color: #a3a8af;
							font-size: 16px;
							cursor: pointer;
							-webkit-box-flex: 0;
							-ms-flex: 0 0 auto;
							flex: 0 0 auto;

							&:hover {
								background-color: #dcdcdc;
							}
						}
					}
				}

				.flow-setting-condition-group-connector {
					margin-top: 15px;
					color: rgb(142, 142, 142);
					font-size: 14px;
				}

				.flow-setting-condition-add {
					width: 100px;
					height: 34px;
					background-color: #fff;
					border-radius: 3px;
					border: 1px solid #dee0e3;
					color: #8e8e8e;
					text-align: center;
					font-size: 13px;
					cursor: pointer;
					line-height: 34px;
					margin-top: 15px;
					margin-left: 13px;

					&:hover {
						background-color: #dcdcdc;
					}
				}
			}

			//
			.tpl-flex-box {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				color: #575757;
				font-size: 14px;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
			}

			// 提示
			.hint-info {
				line-height: 22px;
				color: #646a73;

				p {
					position: relative;
					padding-left: 10px;

					&::before {
						content: '';
						width: 4px;
						height: 4px;
						position: absolute;
						top: 9px;
						left: 0;
						border-radius: 2px;
						background: var(--el-color-primary);
					}
				}
			}
		}

		.flow-setting-block {
			.flow-block-title {
				color: #171a1d;
				font-size: 14px;
				font-weight: 600;
			}

			.flow-block-desc {
				color: rgba(23, 26, 29, 0.4);
				font-size: 12px;
				padding-top: 6px;
				padding-bottom: 18px;
			}

			.flow-block-content {
				.flow-block-defaultTab {
					margin-top: 12px;

					.flow-block-defaultTpl {
						border-radius: 6px;
						background: rgba(23, 26, 29, 0.04);
						padding: 8px 12px;
					}

					.flow-block-defaultSample {
						font-size: 12px;
						color: rgba(23, 26, 29, 0.4);
						padding-top: 8px;
					}
				}

				.flow-block-var {
					padding: 3px 10px;
					background: rgba(126, 134, 142, 0.16);
					border-radius: 4px;
					margin: 0 2px;
				}

				.flow-block-card-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
}

.flow-setting-approval-title {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.del-icon {
		cursor: pointer;
	}
}

.flow-setting-auth-table {
	font-size: 14px;
	color: #8e8e8e;
	font-weight: 400;
	position: relative;

	div {
		margin: 0;
		padding: 0;
		font-family: Microsoft YaHei;
	}

	.flow-setting-auth-table-header {
		padding-left: 9px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 100%;
		height: 40px;
		background-color: #f2f3f5;
	}

	.flow-setting-auth-table-body {
		color: #575757;
		background-color: #fff;
		display: block;
		height: auto;
		width: 100%;
		padding-left: 9px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.flow-setting-auth-table-name-column-row {
			height: 40px;
			width: 100%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			border-bottom: 1px solid #dee0e3;
			position: relative;
		}
	}

	.flow-setting-auth-table-name-column-25 {
		width: 25%;
	}

	.flow-setting-auth-table-name-column-30 {
		width: 40%;
	}

	.flow-setting-auth-table-name-column-25,
	flow-setting-auth-table-name-column-30 {
		span {
			display: block;
			max-width: 100px;
			overflow: hidden;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.flow-setting-auth-table-option-column {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;

		.flow-setting-auth-table-option-column-item-25 {
			width: 25%;

			span {
				font-size: 12px;
			}
		}

		.flow-setting-auth-table-option-column-item-50 {
			width: 50%;
		}
	}
}

.flow-ant-drawer-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	border-top: 1px solid rgb(232, 232, 232);
	padding: 10px 16px;
	// text-align: left;
	left: 0;
	background: rgb(255, 255, 255);
	border-radius: 0 0 4px 4px;
}

.flow-helper {
	.flow-helper-template,
	.flow-helper-strengthen {
		position: absolute;
		color: #171a1d;
		z-index: 90;
		display: flex;
		background: #fff;
		align-items: center;
		cursor: pointer;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		padding: 10px 10px 10px 12px;
		border-radius: 0 100px 100px 0;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 10%);
	}

	.flow-helper-template {
		left: 0;
		top: 55px;
		margin-top: 20px;
	}

	.flow-helper-strengthen {
		left: 0;
		top: 127px;

		.process-icon {
			color: #0089ff;
			width: 16px;
			font-size: 14px;
		}
	}

	.flow-helper-title {
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		height: 20px;
		margin: 0 32px 0 6px;
	}

	.flow-helper-icon {
		color: #0089ff;
		width: 16px;
	}

	.flow-helper-right-icon {
		color: rgba(23, 26, 29, 0.24);
		font-size: 12px;
	}

	.flow-helper-drawer-header {
		padding-left: 8px;

		.flow-helper-drawer-header-title {
			font-size: 18px;
			line-height: 25px;
			font-family: PingFangSC-Medium;
			color: #111f2c;
		}

		.flow-helper-drawer-header-content {
			font-size: 12px;
			line-height: 20px;
			color: rgba(17, 31, 44, 0.4);
		}
	}

	.flow-helper-drawer-item {
		display: inline-flex;
		align-items: center;
		background: #f2f2f7;
		padding: 12px;
		border-radius: 4px;
		margin: 6px 0;
		width: 256px;
		cursor: pointer;

		.flow-helper-drawer-item-icon {
			font-size: 22px;
			margin-right: 12px;
		}

		.flow-helper-drawer-item-title {
			font-size: 15px;
			line-height: 22px;
			color: #191f25;
		}

		.flow-helper-drawer-item-content {
			line-height: 20px;
			font-size: 12px;
			color: rgba(17, 31, 44, 0.4);
		}
	}

	.flow-helper-drawer-row {
		display: flex;
		align-items: center;
		padding-left: 8px;
		margin-bottom: 10px;

		.flow-helper-drawer-row-title {
			font-size: 15px;
			color: #171a1d;
			line-height: 22px;
			vertical-align: middle;
			margin-right: 10px;
		}

		.flow-helper-drawer-row-foot-text {
			margin-top: 5px;
			padding-left: 8px;
		}
	}
}

.flow-helper-drawer-item-popover-img {
	display: block;
	height: 500px;
	width: 500px;
	margin-bottom: 12px;
}

.flow-tips {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 199;
	text-align: left;

	.flow-tips-item {
		line-height: 20px;
		font-size: 16px;
		display: inline-block;
		margin-right: 15px;

		.flow-tips-item-icon {
			font-size: 20px;
			margin-right: 5px;
		}

		.flow-tips-complete {
			color: #20b2aa;
		}

		.flow-tips-current {
			color: #1890ff;
		}

		.flow-tips-not {
			color: #909399;
		}
	}
}

.screenshot {
	position: fixed;
	bottom: 86px;
	right: 34px;
	z-index: 2048;
	touch-action: none;
	user-select: none;

	.screenshot-dropdown {
		width: 120px;
		position: absolute;
		bottom: 47px;
		right: 0;
		z-index: 2;
		background-color: #fff;
		border: 1px solid #ebeef5;
		border-radius: 4px;
		box-shadow: -1px -1px 14px #cccccc6e;
		padding: 4px 4px;

		& > div {
			line-height: 36px;
			margin: 0;
			font-size: 14px;
			color: #606266;
			cursor: pointer;
			outline: none;
			text-align: center;
			border-bottom: 1px solid #dddddd63;

			&:hover {
				background-color: #ecf5ff;
				color: #66b1ff;
			}

			&:last-child {
				border-bottom: none;
			}

			img {
				margin-right: 10px;
				vertical-align: sub;
			}

			span {
				color: #575757;
				font-size: 14px;
			}
		}
	}

	.screenshot-btn {
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
		width: 40px;
		height: 40px;
		font-size: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		border-radius: 50%;
		transition: all 0.5s;
		opacity: 0.2;

		&:hover {
			opacity: 1 !important;
		}
	}
}

.approver-tip-content {
	width: 440px;

	.main-title {
		font-weight: 500;
		color: #000;
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 4px;
	}

	.content {
		color: #646a73;
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 4px;
	}
}

.flow-ant-menu-vertical {
	border-right: 0 solid #e8e8e8 !important;
	width: 130px;
}

.modalClass {
	.ant-modal-body {
		overflow-y: scroll;
		height: 500px;
	}
}

.w-fill {
	width: 100%;
}

.h-100 {
	height: 100px !important;
}

.margin-top-10 {
	margin-top: 10px;
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

//  滚动条样式
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: rgba(0, 0, 0, 0%);
}

::-webkit-scrollbar-thumb {
	background-color: hsla(0, 0%, 79.2%, 0.5);
	cursor: pointer;
	border-radius: 10px;
}

/* &::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
} */

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0%);
}
